<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-yellow" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">
					<p style="font-weight: 600;">麻酱计分</p>
				</block>
			</cu-custom>
			<!-- 工具 -->
			<view>
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-gray "></text> 计分统计
					</view>
				</view>
				<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
					<view class="cu-item" v-for="(item,index) in cuIconList1" :key="index" @click="play(item)">
						<p style="font-weight: 600;padding-bottom: 10px;">
							<view class="light" :class="['text-' + item.textColor]">{{item.name}}</view>
						</p>
						<view :class="['text-' + item.valueColor]">{{item.badge}}</view>
					</view>
				</view>
			</view>
			<!-- 其他 -->
			<view class="home-bottom">
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="cuIcon-title text-gray "></text> 我的对局
					</view>
					<view class="margin-right-lg">
						<view class="cu-tag bg-green">发起计分</view>
					</view>
				</view>
				<view>
					<view class="cu-list menu sm-border">
						<view class="cu-item" v-for="(item,idnex) in gameslist" :key="item.tableid">
							<view style="width: 100%;">
								<view class="flex justify-between padding">
									<view class="cuIcon-crown text-yellow"><text
											class="text-grey">【{{item.tablename}}】</text></view>
									<view>
										<text class="text-green" v-if="item.tablestatus===0">进行中</text>
										<text class="text-gray text-sm" v-else-if="item.tablestatus===1">已结束</text>
										<text class="text-red text-sm" v-else>异常</text>
									</view>
								</view>
								<view class="cu-avatar radius bg-gray margin-left-sm" v-for="(i,index) in item.players"
									:key="i.id" :style="i.avatarUrl">
									<view class="cu-tag badge bg-red">{{i.nickname}}</view>
								</view>
								<view class="flex justify-start padding text-sm">
									<uni-dateformat :date="item.starttime" format="yyyy/MM/dd hh:mm" class="text-green padding-right-lg"></uni-dateformat> ～
									<uni-dateformat :date="item.endtime" format="yyyy/MM/dd hh:mm" class="text-gray padding-left-lg"></uni-dateformat>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		statistics,
		myGames
	} from '@/api/mahjong.js';
	export default {
		data() {
			return {
				cuIconList1: [{
					cuIcon: 'medalfill',
					textColor: 'gray',
					valueColor: 'black',
					badge: 0,
					name: '当前分数',
					router: '/pages/games/mahjong/scoring',
					tag: 'nowscore'
				}, {
					cuIcon: 'github',
					textColor: 'gray',
					valueColor: 'black',
					badge: 0,
					name: '历史分数',
					router: null,
					tag: 'totalscore'
				}, {
					cuIcon: 'emojiflashfill',
					textColor: 'gray',
					valueColor: 'black',
					badge: 0,
					name: '我的排名',
					router: null,
					tag: 'ranks'
				}],
				gameslist: [],
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				avatarUrl: "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
			}
		},
		mounted() {
			this.statistics();
			this.myGames();
		},
		methods: {
			statistics() {

				let _user = uni.getStorageSync('userinfo');
				statistics(_user.userid).then(res => {

					if (res.data === null) {
						return;
					}
					this.cuIconList1.forEach(i => {
						if (i.tag === 'nowscore') {
							i.badge = res.data.data.nowscore;
							i.valueColor = res.data.data.nowscore > 0 ? 'red' : 'green';
						}
						if (i.tag === 'totalscore') {
							i.badge = res.data.data.totalscore;
							i.valueColor = res.data.data.nowscore > 0 ? 'red' : 'green';
						}
						if (i.tag === 'ranks') {
							i.badge = res.data.data.ranks;
						}
					})
				});
			},
			myGames() {

				let _user = uni.getStorageSync('userinfo');
				myGames(_user.userid).then(res => {
					if (res.data === null) {
						return;
					}
					res.data.data.forEach(item => {
						var players = [];
						if (item.players != null) {
							item.players.forEach(i => {
								players.push({
									userid: i.UserId,
									nickname: i.Names.substr(0, 2),
									avatarUrl: 'background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)'
								})
							})
						}
						this.gameslist.push({
							tableid: item.tableid,
							tablename: item.tablename,
							tablestatus: item.tablestatus,
							starttime: item.starttime,
							endtime: item.endtime,
							players: players
						})
					})
				});
			},
			// 进入游戏
			play(item) {
				if (item.router != null) {
					// 跳转
					uni.navigateTo({
						url: item.router
					})
				}
			}
		}
	}
</script>

<style>
	.home-bottom {
		padding-bottom: 140rpx;
	}
</style>